// ========= 类样式
// ====== class style
.text-title, .text-content
  height: 18px
  line-height: 18px
  color: #000
  padding: 0 5px
  font-size: small
  font-family: sans-serif
  display: inline-block
.text-title
  background-color: #2bf
.text-content
  margin: 0 10px 0 0
  padding: 0 28px 0 5px
  background-color: #fff

.highlight
  overflow-x: auto
  table
    td
      border: 0
    code
      background-color: transparent!important
    .gutter
      color: #000
      text-align: right
      background-color: #2bf
      position: relative
      left: 0
      &, pre, span
        user-select: none
        pointer-events: none
    .code
      width: 100%
      background-color: rgba(#fff, .05)
      transition: .3s
      &:hover
        background-color: rgba(#fff, .1)

.category-list, .tag-list
  list-style: none
  display: block
  margin: 0

.category-list
  padding: 0
.category-list-item
  position: relative
  &:hover
    a
      color: #2bf
      border-left: #2bf solid 5px
      background-color: rgba(#fff, .1)
    span
      color: #fff
.category-list-link
  width: 100%
  padding: 6px 40% 6px 10px
  display: inline-block
  box-sizing: border-box
  &:before, &:after
    color: #2bf
    content: '#'
    padding: 0 5px
.category-list-count
  padding: 3px 10px
  position: absolute
  right: 0

.tag-list
  padding: 10px
.tag-list-item
  line-height: 23px
  background-color: #313131
  display: inline-block
  margin: 5px
  border: #313131 solid 1px
  border-radius: 3px
  &, a, span
    transition: .3s
  &:hover
    border-color: #2bf
    a
      color: #000
      background-color: #2bf
    span
      background-color: #313131
  &:active
    border-color: #fe2
    a
      background-color: #fe2
.tag-list-link
  color: #fff
  padding: 3px 6px 3px 12px
  display: inline-block
.tag-list-count
  display: inline-block
  padding: 3px 6px
  color: #fff
  background-color: #494949

.mermaid
  margin: 10px 0
  padding: 10px
  text-align: center